<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 600px;
            background-color: rgb(197, 193, 193);
        }
        .center{
            width: 90%;
            height: 100%;
            margin: 0 auto;
            /* background-color: aqua; */
        }
        .center .furniture{
            background-color: orange;
            width: 60%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            float: left;
        }
        .center .furniture .furniture1{
            background-color: yellow;
            width: 23%;
            height: 49%;
        }
        .center .furniture .furniture1 img{
            width: 100%;
            height: 200px;
        }
        .center .furniture .furniture1 p{
            margin-left: 10px;

        }
        .center .furniture .furniture1 button{
            width: 120px;
            margin-left: 10px;
            text-align: center;
            background-color: red;
            color: white;
            border: none;
        }
        .center .ShoppingCart{
            box-sizing: border-box;
            width: 40%;
            height: 100%;
            float: left;
            border: 1px solid gray;
            overflow: auto;
            /* overflow: auto; */
            /* position: relative; */
        }
        .center .ShoppingCart h1{
            font-size: 20px;
            margin-left: 10px;
            margin-top: 10px;
            /* position: absolute; */
            /* left: 10px;
            top: 10px; */
        }
        .center .ShoppingCart .price{
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 100px;
            margin-bottom: 10px;

        }
        .center .ShoppingCart .price input{
            height: 50px;
            margin-top: 20px;
        }
        .center .ShoppingCart .price .pic2{
            width: 100px;
            height: 120px;
            margin-top: 20px;
        }
        .center .ShoppingCart .price .pic2 img{
            width: 100%;
        }
        .center .ShoppingCart .price span{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center">
            <div class="furniture">
                
            </div>
            <div class="ShoppingCart">
                <h1>购物车</h1>
                
            </div>
        </div>
    </div>
</body>
</html>
<script>
    
    // class Shopping{
    //     constructor(dom,list){
    //         this.dom = dom
    //         this.list = list
    //         this.str = ``
    //         this.btn = document.querySelector('.ShoppingCart')
    //         this.render()
    //     }
    //     //渲染商品
    //     render(){
            
    //         for(let i = 0 ; i<this.list.length ; i++){
    //         this.str += 
    //     }
    //     this.dom.innerHTML += this.str
    //     }
    //     //
    //     bindevent(){
    //         this.btn.onclick((e)=>{

    //         })
    //     }
    // }
    let list = [{ 'pic':'1.jpeg','id':'高级办公椅','money':'1000'},{ 'pic':'2.jpeg','id':'高级按摩椅','money':'2000'},{ 'pic':'3.jpeg','id':'高级沙发','money':'100'},{ 'pic':'4.jpeg','id':'电动按摩椅','money':'10'},{ 'pic':'5.jpeg','id':'老板椅','money':'300'},{ 'pic':'6.jpeg','id':'办公桌','money':'200'},{ 'pic':'7.jpeg','id':'升降办公桌','money':'400'},{ 'pic':'8.jpeg','id':'高级办公桌','money':'3000'}]
    let Shopcat = {list:[]}
    function render(){
        let furnitureEle = document.querySelector('.furniture')
        furnitureEle.innerHTML = list.map((item)=>{
            return `
             <div class="furniture1">
             <img src="${item.pic}" alt="">
             <p>${item.id}</p>
             <p>${item.money}</p>
             <button>加入购物车</button>
             </div>
             `
        }).join('')
    }
    function renderShop(){
        let gouwuche = document.querySelector('.ShoppingCart')
        gouwuche.innerHTML = Shopcat.list.map((item)=>{
            return `
            <div class="price">
                    <input type="checkbox">
                    <div class="pic2">
                        <img src="${item.pic}" alt="">
                        <p>${item.id}</p>
                    </div>
                    <span>${item.money}</span>
                    <span>1</span>
                    <span>删除收藏</span>
            </div>
            `
        }).join('')
    }
    render()
    //添加点击事件
    let shop = document.querySelector('.furniture')
    shop.onclick = (e)=>{
        if(e.target.tagName == 'BUTTON'){
            let btns = [...document.querySelectorAll('button')]
            let index = btns.findIndex((item)=>{
                return item = e.target
            })
            //添加商品数据到购物车数组
            Shopcat.list.push(list[index])
            renderShop()
        }
    }
    // let shop = new Shopping(furnitureEle,list)
    // let newshop = new Proxy(Shopcat,{
    //     set:(a,b,c)
    // })
    
</script>